<template>
    <div class="table">
        <header>
          <input type="text" placeholder="请输入书名" v-model="bookName">
          <input type="text" placeholder="请输入价格" v-model="bookPrice">
          <button @click="add">添加</button>
        </header>
        <table border>
            <thead>
                <tr>
                    <th>书名</th>
                    <th>价格</th>
                    <th>时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item,index) in list" :key="index">
                    <td>{{item.name}}</td>
                    <td>{{item.price}}</td>
                    <td>{{item.time}}</td>
                    <td><button @click="del(index)">删除</button></td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
import { reactive, toRefs} from 'vue'
export default {
    setup(props) {
      const data = reactive({
          bookName:'',
          bookPrice: 0,
          list:[]
      })

      const add = () => {
        let obj = {
          name: data.bookName,
          price: data.bookPrice,
          time: new Date().toLocaleString()
        }
        data.list.push(obj);
      }

      const del = (i) => {
        data.list.splice(i,1)
      }
      return{
          ...toRefs(data),
          add,
          del
      }
    }
}
</script>
<style lang="scss" scoped>
    
</style>